<template>
    <div>
        <!--<a class="item" href="tel:15668353128">-->
        <!--<p class="p1">客服电话01</p>-->
        <!--<p class="p2">15668353128</p>-->
        <!--</a>-->
        <div class="item-s" @click="popCode">
            <div class="iteml">
                <p class="p1">客服公众号</p>
                <p class="p2">产品物流问题在线咨询</p>
            </div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-chevronright"></use>
            </svg>
        </div>
        <div class="line"></div>
        <div class="item-s" @click="customer">
            <div class="iteml">
                <p class="p1">客服咨询</p>
                <p class="p2">相关问题在线咨询</p>
            </div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-chevronright"></use>
            </svg>
        </div>
        <van-popup v-model="show" :lock-scroll="true" class="pop">
            <p class="p1">扫描下方二维码咨询</p>
            <img :src="urlImg" alt="">
            <button-normal
                    widthPro="80"
                    heightPro="29"
                    textBtn="确认"
                    color="#fff"
                    size="14"
                    @click.native="sure"
            ></button-normal>
        </van-popup>
    </div>
</template>
<script>

    import buttonNormal from '@/components/common/buttonNormal';
    import API from '../../request/api';
    import {commonMixin, sysMixin} from '@/common/mixin';
    // language用于控制访客端展示的语言类型，language=ZHCN为中文，language=EN为英文，您可按需设置一种语言类型
    export default {
        /**
         * 客服咨询
         */
        name: "customerOn",
        components: {buttonNormal},
        mixins: [commonMixin, sysMixin],
        data() {
            return {
                show: false,
                urlImg: ''
            };
        },
        created() {
            //    发请求获取客服二维码
            this.request.get(API.message, {system: this.system}).then((res) => {
                console.log(res.Customerpic, 'rereerer');
                this.urlImg = res.Customerpic;
            }).catch((err) => {

            });

        },
        methods: {
            popCode() {
                //    弹出客服二维码
                this.show = true;
                // https://iryoss3-0.oss-cn-beijing.aliyuncs.com/static/poly-public.png
            },
            sure() {
                this.show = false;
            },
            customer() {
                //    客服咨询
                this.$router.push({
                    name: 'custinger',
                    query: {
                        urlImg: this.urlImg
                    }
                });
            }
        },

    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .pop {
        flex-y()
        padding 6vw 14vw 3vw 14vw
        box-sizing border-box
        background grayF
        border-radius main-radius
        img {
            width vw(165)
            margin-top 3vw
            height vw(165)
        }
    }

    .item-s {
        height vw(70)
        flex-x()
        background grayF
        box-sizing border-box
        width 100vw
        padding 0 4vw
        .iteml {
            flex-y(, flex-start)
            height vw(36)
            .p2 {
                word-vw(11px, gray9)
            }
        }
        .icon {
            fill gray9
        }
    }

    .item {
        height vw(50)
        background grayF
        width 100vw
        box-sizing border-box
        margin 3vw 0
        flex-x()
        padding 0 4vw
    }
</style>